/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-09 09:38:46
 * @LastEditTime: 2019-08-12 16:17:19
 * @LastEditors: Please set LastEditors
 */
import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router-dom';
import Routes from './routes/index'

const { Header, Sider, Content, Footer } = Layout;
const { SubMenu } = Menu;


class App extends Component {
  state = { 
    collapsed: false,
   }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
  }
  render() { 
    return (
      <Layout className="sider-box">
          <Sider  trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
              <Menu.Item key="1">
                <Icon type="home" />
                <span><Link to={{pathname:"/app/home"}}>Home</Link></span>
              </Menu.Item>
              <SubMenu
                key="sub1"
                title={
                  <span>
                    <Icon type="link" />
                    <span>UI</span>
                  </span>
                }
              >
                <Menu.Item key="2"><Link to={{pathname:"/app/buttons",state: {id:3}}}>Buttons</Link></Menu.Item>
                <Menu.Item key="3"><Link to="/app/spins">Spins</Link></Menu.Item>
                <Menu.Item key="4">Alex</Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub2"
                title={
                  <span>
                    <Icon type="form" />
                    <span>Form</span>
                  </span>
                }
              >
                <Menu.Item key="5"><Link to="/app/forms">Forms</Link></Menu.Item>
              </SubMenu>
              <Menu.Item key="6">
                <Icon type="table" />
                <span><Link to={{pathname:"/app/table"}}>Table</Link></span>
              </Menu.Item>
              <Menu.Item key="7">
                <Icon type="table" />
                <span><Link to={{pathname:"/app/todolist"}}>TodoList</Link></span>
              </Menu.Item>
              <Menu.Item key="8">
                <Icon type="table" />
                <span><Link to={{pathname:"/app/todolist2"}}>TodoList2</Link></span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
              />
            </Header>
            <Content
              style={{
                margin: '24px 16px',
                padding: 24,
                background: '#fff',
                minHeight: 280,
              }}
            >
              <Routes/>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
                React-Antd ©{new Date().getFullYear()} Created by 715809341@qq.com
            </Footer>
          </Layout>
      </Layout>
    );
  }
}
 
export default App;
